<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h-layout-bottom">
        <text>传鸿组态二维图形版</text>
        <div>{{ tips }}</div>
        <div class="coordinate_item">
            <div class="coordinate_tiele">坐标</div>
            <div class="coordinate_info">x:{{ coordinate.x }}</div>
            <div class="coordinate_info">y:{{ coordinate.y }}</div>
        </div>
    </div>
</template>

<script setup  lang="ts">

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布

/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 解构-画布*/
const { tips, coordinate } = storeToRefs(myStore);

</script>

<style lang="scss" scoped>
// 底部
.h-layout-bottom {
    height: 30px;
    width: 100vw;
    border-top: 1px solid rgb(100, 100, 100);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    user-select: none;
    color: #ffffff;
}


// 坐标项目
.coordinate_item {
    margin: 0px;
    width: 250px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

// 坐标名称
.coordinate_tiele {
    margin: 0px;
    width: 126px;
}
</style>@/store